import React, { Component } from 'react';
import '../assets/css/stuList.scss';
import { Row, Col, Table, Input, Select, Button } from 'antd';
import PropTypes from "prop-types";
import Dialog from '../components/Dialog';
import StudentForm from '../components/dialog/StudentForm';
import http from '../utils/http';
// import ev from '../utils/event';
// import axios from 'axios';
const Search = Input.Search;
const Option = Select.Option;

const data = [
    {
        name: '总学员',
        id: 1,
        number: 1
    },
    {
        name: '合约快到期学员',
        id: 2,
        number: 0
    },
    {
        name: '试听学员',
        id: 3,
        number: 0
    },
    {
        name: '未签约学员',
        id: 4,
        number: 0
    },
    {
        name: '未绑定微信',
        id: 5,
        number: 0
    },
    {
        name: '未排课学员',
        id: 6,
        number: 0
    }
]

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
    }, 
    {
        title: '年龄',
        dataIndex: 'age',
        render: text => <span>{text ? text : '未录入'}</span>,
    }, 
    {
        title: '性别',
        dataIndex: 'sex',
        render: text => <span>{text ? text === 1 ? '男' : '女' : '未录入'}</span>,
    }, 
    {
        title: '地址',
        dataIndex: 'address',
    },
    {
        title: '联系方式',
        dataIndex: 'phone',
    },
    {
        title: '备注',
        dataIndex: 'notes',
    }
];

class StuList extends Component {

    state = {
        visible: false,
        tableData: [],
        pagination: {
            defaultCurrent: 1,
            pageSize: 5,
            total: 0,
            onChange: (page) => {
                this.getStudentList(page);
            }
        }
    }

    // 父组件声明自己支持 context
    static childContextTypes = {
        color: PropTypes.string,
        callback: PropTypes.func,
    }

    // 父组件提供一个函数，用来返回相应的 context 对象
    getChildContext(){
        return{
            color: "red",
            callback: this.callback.bind(this)
        }
    }

    callback(msg){
        if(msg === 'success') {
            this.setState({
                visible: false
            })
            this.getStudentList();
        }
    }
    
    onHeaderCell = (column) => {
        console.log(column)
    }
    
    onVisibleChange = (val) => {
        this.setState({
            visible: val
        })
        // isUpdate && this.getStudentList();
    }
    
    // 获取学生列表
    getStudentList = async(val = 1) => {
        let _data = await http('post', '/student/studentList', {
            name: '',
            pageIndex: val,
            pageSize: 5
        });
        console.log(_data);
        if(_data.data.status === 200) {
            let pagination = Object.assign({}, this.state.pagination, { total: _data.data.data.totalCount })
            this.setState({
                tableData: _data.data.data.result,
                pagination,
            })
        }
    }

    handClick = async() => {
        await http('post', '/student/findMenuList');
    }

    componentDidMount() {
        this.getStudentList();
        // this.handClick();
        /*ev.on('change', (msg) => {
            console.log(msg)
        })*/
    }

    render() {
        return (
            <div>
                <div className="main-padding">
                    <div className="stu-title">
                        <Row >
                            {data.map(v => {
                                return  <Col span={4} key={v.id} className="col-hover">
                                    <p>{v.name}</p>
                                    <p>{v.number}</p>
                                </Col>
                            })}
                        </Row>
                    </div>
                    <div className="stu-main">
                        <div className="stu-search">
                            <div>
                                <Search
                                    placeholder="请输入学生姓名"
                                    onSearch={value => console.log(value)}
                                    style={{ width: 200 }} />

                                <Select defaultValue="lucy" style={{ width: 120, margin: '0 10px', }}>
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="disabled" disabled>Disabled</Option>
                                    <Option value="Yiminghe">yiminghe</Option>
                                </Select>

                                <Select defaultValue="lucy" style={{ width: 120 }}>
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="disabled" disabled>Disabled</Option>
                                    <Option value="Yiminghe">yiminghe</Option>
                                </Select>
                            </div>
                            <Button type="primary" onClick={() => {this.setState({visible: true})}}>添加学员</Button>
                            {/*<Button type="primary" onClick={this.handClick}>click</Button>*/}
                        </div>
                        <Table columns={columns} dataSource={this.state.tableData} pagination={this.state.pagination} onHeaderCell={this.onHeaderCell} rowKey="id"/>
                    </div>
                </div>
                <Dialog visible={this.state.visible} onVisibleChange={this.onVisibleChange} form={StudentForm}></Dialog>
            </div>
        )
    }
}

export default StuList;